<template>
	<view class="choose">
		<view class="close" @click="close">
			<image src="@/static/images/close.png"></image>
		</view>
		<view class="title">选择饰品</view>
		<view class="search">
			<view class="search_view">
				<image src="@/static/images/1.png"></image>
				<input type="text" placeholder="请输入饰品名称">
				<view class="btn">搜索</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view">
			<view class="list">
				<view class="item" :class="checked.includes(item.id)?'active':''" v-for="item in list"
					@click="add(item)">
					<image :src="item.product_cover" class="cover"></image>
					<view class="name">{{item.product_name}}</view>
				</view>
			</view>
		</scroll-view>
		<!-- <view class="submit">确认选择</view> -->
	</view>
</template>

<script setup>
	import {
		orderLists
	} from "@/request/api";
	import {
		ref,
		watch
	} from "vue";
	const props = defineProps({
		data: Object
	});
	const emit = defineEmits(["change", "submit"]);

	let props_data = {};

	const list = ref([]);
	const getList = async () => {
		let {
			list: {
				list: value
			}
		} = await orderLists({
			page: 1,
			limit: 999,
			status: 1,
			product_id: props_data.id,
		});
		list.value = value;
	};

	let checked = ref([]),
		checkbox = [];
	watch(() => props.data, (n) => {
		props_data = n;
		checkbox = props_data.checkbox;
		let temp = [];
		checkbox.forEach(item => {
			temp.push(item.id);
		});
		checked.value = temp;
		getList();
	}, {
		deep: true,
		immediate: true
	});

	const add = (item) => {
		let id = item.id;
		let total = props_data.total;
		if (!checked.value.includes(id)) {
			if (checked.value.length >= total) {
				uni.$uv.toast("选择上限");
				return
			}
			checked.value.push(id);
			checkbox.push(item);
			props_data.number = checkbox.length;
			return
		}
		let index = checked.value.findIndex(value => value == id);
		checked.value.splice(index, 1);
		checkbox.splice(index, 1);
		props_data.number = checkbox.length;
	};
	const close = () => {
		props_data.checkbox = checkbox;
		emit("change", props_data);
	};
</script>

<style scoped lang="scss">
	.choose {
		height: 80vh;
		// padding: 30rpx 50rpx;
		background: #2F2F2F;
		position: relative;

		.close {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			z-index: 2;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.title {
			height: 110rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 40rpx;
			font-weight: bold;
			padding: 30rpx 0 40rpx;
			box-sizing: border-box;
		}

		.search {
			height: 168rpx;
			padding: 40rpx 50rpx;
			box-sizing: border-box;

			.search_view {
				height: 88rpx;
				border-radius: 10rpx;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
				background: #656565;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			image {
				width: 28rpx;
				height: 28rpx;
			}

			input {
				flex: 1;
				color: #999999;
				font-size: 26rpx;
				font-weight: bold;
				padding: 0 16rpx;
				box-sizing: border-box;
			}

			.btn {
				width: 132rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #333333;
				font-size: 26rpx;
				font-weight: bold;
				border-radius: 10rpx;
				background: #DDF247;
			}
		}

		.scroll_view {
			height: calc(80vh - 110rpx - 168rpx);

			.list {
				padding: 0rpx 50rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 300rpx;
					height: 300rpx;
					margin-bottom: 30rpx;
					background: url(@/static/images/s1.png) no-repeat;
					background-size: 100% 100%;
					position: relative;

					&.active {
						border: 1px solid #E8E342;
						box-sizing: border-box;
					}

					.cover {
						width: 100%;
						height: 100%;
					}

					.name {
						width: 100%;
						text-align: center;
						color: #EEEEEE;
						font-size: 24rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						padding: 0 42rpx;
						box-sizing: border-box;
						position: absolute;
						left: 0;
						bottom: 32rpx;
						z-index: 2;
					}
				}
			}
		}

		.submit {
			width: 620rpx;
			height: 88rpx;
			color: #111111;
			font-size: 28rpx;
			font-weight: bold;
			border-radius: 20rpx;
			background: #DDF247;
		}
	}
</style>